<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 基本表单</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/static/admin/css/animate.css" rel="stylesheet">
    <link href="/static/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="/static/admin/css/plugins/webuploader/webuploader.css">-->
    <!--<link rel="stylesheet" type="text/css" href="/static/admin/css/demo/webuploader-demo.css">-->
    <link rel="stylesheet" type="text/css" href="/static/admin/plugins/webupload/css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/admin/plugins/webupload/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/admin/plugins/webupload/css/demo.css">
    <link rel="stylesheet" href="/static/admin/css/layui.css"  media="all">
    <style>
        #uploader .filelist{
            display: -webkit-inline-box ;
        }
        .dingwei{
            position: absolute;
            left: 15px;
            top: 48px;
            opacity: 0.7;
            display: none;
        }
        .cha{
            width: 20px;
            position: absolute;
            left: 78px;
            top: 2px;
            opacity: 1;
        }


    </style>
</head>

<body class="gray-bg">
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>商品添加
                    <small>"*"代表必填选项,请认真填写</small>
                </h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">

                <form method="post" class="form-horizontal" action="{:url('admin/goods/update',['id'=>$id])}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属栏目:</label>

                        <div class="col-sm-2">

                            <select class="form-control m-b" name="cid">
                                {foreach $cData as $v}
                                <option value="{$v.id}">{$v._cname}</option>
                                {/foreach}
                            </select>


                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >商品名称:</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="title" value="{$gData['title']}">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >市场价:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="price" value="{$gData['price']}">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >官方定价</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="old_price" value="{$gData['old_price']}">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >库存:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="count" value="{$gData['count']}"> <span
                                class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">已售出:</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="sale" value="{$gData['sale']}">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>

                        <div class="col-sm-10">
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="1" {if condition="$gData['sex']==1"} checked {else/> } {/if} name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 男款
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="2" {if condition="$gData['sex']==2"} checked {else/>} {/if} name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 女款
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="3" {if condition="$gData['sex']==3"} checked {else/>} {/if} name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 男童
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label class="">
                                    <div class="iradio_square-green" style="position: relative;"><input type="radio" value="4" {if condition="$gData['sex']==4"} checked {else/>} {/if} name="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                    <i></i> 女童
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">列表封面:</label>

                        <div class="col-sm-10">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">上传图片</button><input class="layui-upload-file" type="file" name="file">
                                <div class="layui-upload-list">
                                    <div style="width: 100px;height: 30px;background-color: #0B0B0B" class="dingwei">
                                        <img src="/static/admin/img/cha.png" alt="" class="cha"></div>
                                    <img class="layui-upload-img" id="demo1" style="width: 100px" src="/{$gData['list_pic']}">
                                    <input type="text" class="list_pic" hidden name="list_pic" value="{$gData['list_pic']}">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="hr-line-dashed"></div>

                   <!-- <div class="form-group">
                        <label class="col-sm-2 control-label">商品预览图:</label>
                        <div class="col-sm-10" >

                            <div id="uploader">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <div id="filePicker"></div>
                                        <p>或将照片拖到这里，单次最多可选10张</p>
                                    </div>
                                    <ul class="filelist">
                                        <li  class="state-complete upload-state-done">
                                            <p class="imgWrap"><img src ="" >
                                            </p>
                                            <div class="file-panel" style="height: 30px;" id="upl"><span class="cancel">删除</span><span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span></div>

                                            <p class="progress"><span style="display: none; width: 0px;"></span></p><span class=""></span></li>
                                    </ul>
                                </div>
                                <div class="statusBar" style="display:block;">
                                    <div class="progress">
                                        <span class="text">0%</span>
                                        <span class="percentage"></span>
                                    </div><div class="info"></div>
                                    <div class="btns">
                                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<input type="text" name="pic_path pic_path'" >-->
                        <p id="p"></p>
                    </div>-->

                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品描述:</label>

                        <div class="col-sm-10">
                            <script id="container" name="description" type="text/plain" value="{$gData['description']}">

                         </script>
                            <!-- 配置文件 -->
                            <script type="text/javascript" src="/static/admin/plugins/ueditor/ueditor.config.js"></script>
                            <!-- 编辑器源码文件 -->
                            <script type="text/javascript" src="/static/admin/plugins/ueditor/ueditor.all.js"></script>
                            <!-- 实例化编辑器 -->
                            <script type="text/javascript">
                                var ue = UE.getEditor('container');
                            </script>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

            <div id="app">
                <textarea name="goods_attribute"  cols="30" rows="10" v-text="spec">@{{attrData}}</textarea>
                <div v-for="(v,k) in spec">
                    <button class="btn btn-xs btn-danger " type="button">
                        <span class="bold" @click.prevent="del(k)">删除</span>
                    </button>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">颜色:</label>

                        <div class="col-sm-2">
                            <input type="text" class="form-control" v-model="v.color">
                        </div>
                        <label class="col-sm-2 control-label">尺寸:</label>

                        <div class="col-sm-2">
                            <input type="text" class="form-control" v-model="v.size">
                        </div>
                        <label class="col-sm-2 control-label">库存量:</label>

                        <div class="col-sm-2">
                            <input type="text" class="form-control" v-model="v.repertory">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品预览图:</label>
                        <div class="col-sm-10" >

                            <div class="layui-upload">
                                <button type="button" class="layui-btn" :id="'test2'+v.key">多图片上传</button>
                                <input class="layui-upload-file" type="file" name="file" multiple="">
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                    预览图：
                                    <div class="layui-upload-list" :id="'demo2'+v.key" style="display: flex">
                                   <div v-for="(v,k) in v.pic">
                                        <img :src="'/'+v"  class="layui-upload-img" style="width: 100px;" ><input  type="text" hidden >
                                    </div>
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                        <!--<input type="text" name="pic_path pic_path'" >-->
                        <p id="p"></p>
                    </div>


                </div>
                <button class="btn btn-xs btn-success " type="button" @click.prevent="add()">
                    <span class="bold" >添加一项</span>
                </button>
            </div>

            <div class="hr-line-dashed"></div>
            <div class="hr-line-dashed"></div>


            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <button class="btn btn-primary" type="submit">保存内容</button>
                    <button class="btn btn-white" type="submit" >取消</button>
                </div>
            </div>

            </form>

        </div>
    </div>
</div>
</div>
</div>


<!-- 全局js -->
<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>

<!--<script src="/static/admin/js/plugins/webuploader/webuploader.min.js"></script>-->

<!--<script src="/static/admin/js/demo/webuploader-demo.js"></script>-->

<!-- 自定义js -->
<script src="/static/admin/js/content.js?v=1.0.0"></script>

<!-- iCheck -->
<script src="/static/admin/js/plugins/iCheck/icheck.min.js"></script>
<script src="/static/admin/js/vue.js"></script>


<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });


    });
    $('#demo1').mouseover(function () {
        $('.dingwei').css('display','block')
    });
    $('#demo1').mouseleave(function () {
        $('.dingwei').css('display','none')
    })
</script>
<!-- layerDate plugin javascript -->
<script type="text/javascript" src="/static/admin/plugins/webupload/js/webuploader.min.js"></script>
<!--<script type="text/javascript" src="/static/admin/plugins/webupload/js/upload.js"></script>-->
<script src="/static/layui/layui.js" charset="utf-8"></script>

<script>
    new Vue({
        el:'#app',
        data:{
            spec:{$attrData},
        },
        methods:{
            add(){
                var html = {color:'',repertory:'',size:'',key:Date.parse(new Date()),pic:[]};
                this.spec.push(html);
                setTimeout(function(){
                    upload(html);
                })
            },
            del(k){
                this.spec.splice(k,1);
            }
        }
    });

    function upload(html) {
        //这里是你上传代码
        var i=0;
        layui.use('upload', function(){
            var $ = layui.jquery
                ,upload = layui.upload;

            //多图片上传
            upload.render({
                elem: '#test2'+html.key
                ,url: '/index.php/component/Upload/up'
                ,multiple: true

                ,before: function(obj){
                    //预读本地文件示例，不支持ie8

                    obj.preview(function(index, file, result){
                        i++;
                        $("#demo2"+html.key).append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px"><input id="put'+html.key+i+'" v-model="'+html.pic+'" type="text">')
                    });
                }
                ,done: function(res){
                    //上传完毕
                    $("#put"+html.key+i).val(res.path);

                    html.pic.push(res.path);

                }
            });




        });
        //普通图片上传
        $('#uploadre'+html.key).on({


        });
    }

</script>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/index.php/component/Upload/up'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                $('.list_pic').val(res.path)
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });



    });
</script>





<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '/static/admin/js/plugins/webuploader';
</script>


<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->

</body>

</html>
